<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-[#d9eee3] box pb-10">
    <!-- 顶部Logo -->
    <Header />
    <!-- 主卡片容器 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mx-auto w-95/100 mt-8">
      <div class="font-bold mb-4" style="font-size: 26px">
        <span class="text-3xl mb-6">Let’s confirm your coverage details.</span>
      </div>
      <div class="mb-6">
        <span class="text-lg">Fill in your information below.</span>
      </div>
      <div class="mb-2">
        <span class="text-2xl font-bold mr-3">Patient Information</span>
        <span
          class="text-[#477577] underline"
          @click="router.push('/patientInfo')"
          >Edit</span
        >
      </div>
      <div>
        <p class="opacity-[60%] mb-2">
          {{ paymentInfo.firstName + " " + paymentInfo.lastName }}
        </p>
        <p class="opacity-[60%]">{{ paymentInfo.email }}</p>
      </div>
      <p class="text-2xl font-bold mt-3">Insurance Provider</p>
      <p class="leading-none mt-4 mb-4">
        Enter the full name of insurance plan as noted on your insurance card
      </p>
      <div class="mb-5">
        <input
          v-model.trim="paymentInfo.insurer"
          type="text"
          @blur="validBaclk"
          placeholder="Full name of insurance plan noted on card"
          class="h-[50px] w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
        />
      </div>
      <!-- 保险信息链接 -->
      <div class="flex items-start mb-8">
        <img class="w-[15px] h-[13px]" :src="star" alt="" />
        <div class="leading-none text-lg font-bold">
          <a
            href="javascript:void(0)"
            class="ml-2 text-[#2D6E74] underline"
            @click="goPlanInsuance"
          >
            View Insurance Plan Details
          </a>
          <br />
          <span class="no-underline text-[#2D6E74] ml-2">(RECOMMENDED)</span>
        </div>
      </div>
      <p v-if="isBalck" class="text-[#B42026] font-bold text-base">If you’re having a problem entering your insurance, please check accepted insurance plans.</p>
      <p class="text-2xl font-bold mt-3">Insurance Details</p>
      <p class="leading-none mt-4 mb-4">
        Please enter your Date of Birth and Insurance Member ID
      </p>
      <div class="mb-5">
        <!-- <input
          type="text"
          placeholder="MM   |    DD    |    YYYY"
          class="h-[50px] w-full p-4 rounded-lg border border-gray-400 focus:border-[#2D6E74] outline-none"
        /> -->
        <!-- <el-date-picker
          v-model="paymentInfo.dateOfBirth"
          type="date"
          prefix-icon=""
          placeholder="MM   |    DD    |    YYYY"
          format="MM/DD/YYYY"
          class="w-full mb-3 rounded-lg"
          size="large"

        /> -->
        <ChartInput
          type="date"
          v-model:value="paymentInfo.dateOfBirth"
          sonWidth="46"
          character="/"
        />
        <el-input
          v-model="paymentInfo.insuredMemberId"
          type="text"
          placeholder="Insurance Member ID"
          class="h-[50px] w-full mt-5"
        />
      </div>
      <div class="mt-5 leading-none">
        Please upload the file(s) of the front and back of your insurance card.
      </div>

      <div class="upload mt-5 mb-5 flex justify-start">
        <div class="upload-box1">
          <el-upload
            ref="fontRef"
            class="border border-gray-200 rounded-lg flex items-center justify-center cursor-pointer w-[122px] h-[122px] bg-[#edf2f2]"
            action="#"
            accept="image/*"
            :multiple="false"
            :auto-upload="false"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            list-type="picture-card"
          >
            <div
              class="w-[122px] h-[122px] flex items-center justify-center"
              style="background-color: #edf2f2"
            >
              <img v-if="fontUrl" :src="fontUrl" class="avatar" />
              <el-icon v-else class="text-2xl text-gray-400"><Plus /></el-icon>
            </div>
          </el-upload>
          <div style="text-align: center; font-weight: 700">Font</div>
        </div>
        <div class="upload-box2">
          <el-upload
            ref="backRef"
            class="border border-gray-200 rounded-lg flex items-center justify-center cursor-pointer w-[122px] h-[122px] ml-5 bg-[#edf2f2]"
            action="#"
            accept="image/*"
            :multiple="false"
            :auto-upload="false"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-change="handleRightChange"
            list-type="picture-card"
          >
            <div
              class="w-[122px] h-[122px] flex items-center justify-center"
              style="background-color: #edf2f2"
            >
              <img v-if="backUrl" :src="backUrl" class="avatar" />
              <el-icon v-else class="text-2xl text-gray-400"><Plus /></el-icon>
            </div>
          </el-upload>
          <div class="ml-5" style="text-align: center; font-weight: 700">
            Back
          </div>
        </div>
      </div>
      <!-- <div>
        <p class="text-2xl font-bold mt-3">Billing & Insurance Disclaimer</p>
        <p class="leading-none mt-4 mb-4">
          By proceeding with MyUTI’s advanced UTI testing, you acknowledge and
          agree to the following billing and payment terms:
        </p>
      </div> -->
      <div class="mb-8">
        <h2 class="text-lg font-medium mb-4">Billing & Insurance Disclaimer</h2>
        <div class="text-sm space-y-4">
          <p>
            By proceeding with MyUTI's advanced UTI testing, you acknowledge and
            agree to the following billing and payment terms:
          </p>
          <ul class="list-disc pl-5 space-y-2 text-lg">
            <li>
              The total cost of the
              <Strong
                >{{productName }} is ${{paymentInfo.productPrice}}.</Strong
              >
            </li>
            <li>
              While we will make every effort to secure insurance coverage for
              your test, <Strong>coverage is not guaranteed</Strong>. If your
              insurance provider denies the claim or does not cover the full
              cost, you are <Strong>financially responsible</Strong> for the
              full ${{ paymentInfo.productPrice }} fee.
            </li>
            <li>
              A valid credit card will be placed on file at the time of
              purchase. In the event of a denial or non-payment by your
              insurance provider, your card will be charged for the remaining
              balance.
            </li>
            <li>
              To avoid unexpected charges, we strongly encourage you to verify
              coverage with your insurance provider prior to testing.
            </li>
            <li>
              By checking the box below, you acknowledge that you have read,
              understand, and agree to these terms.
            </li>
          </ul>
        </div>
      </div>
      <!-- Agreement -->
      <div class="mb-8">
        <el-checkbox v-model="agreement" class="flex items-start" fill="#477577" :style="{'--fill-color': '#477577'}">
          <span class="text-lg font-bold leading-none"
            >I acknowledge and agree to the billing and insurance terms.</span
          >
        </el-checkbox>
      </div>
      <!-- 提交按钮 -->
      <div class="flex justify-left mt-8 items-center">
        <a class="mr-5 text-[#2D6E74] underline curson-point" @click="goBack"> Back </a>
        <button
          @click="handleSubmit"
          class="curson-point selfPay w-[184px] h-[60px] text-white py-3 !rounded-button  transition-colors duration-200 rounded-[30px]"
          :class="[(agreement === true && isBalck ==false) ? ' bg-[#477577]' : 'bg-[#dae3e4]']"
        >
          Next
        </button>
      </div>
    </div>
    <div class="mt-8 text-center">
      <img :src="bottomlog" alt="GOPATH Diagnostics" class="mx-auto w-30" />
    </div>
  </div>
</template>
        <script lang="ts" setup>
import { ref, onMounted,watch } from "vue";
import { Check } from "@element-plus/icons-vue";
import log from "@/assets/img/red-uti-logo.png";
import bottomlog from "@/assets/img/green-uti-logo.png";
import bottleImg from "@/assets/img/uti-bottle.png";
import star from "@/assets/img/star.png";
import compony from "@/assets/img/insurance-compony.png";
import insuranceCard from "@/assets/img/insurance-card.png";
import Header from "@/views/components/insurance-header.vue";
import { ElMessage } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useUtiStore } from "@/store/tui";
import { useFileStore } from "@/store/file";
import ChartInput from "@/views/components/chart-input.vue";

const router = useRouter();
const store = useUtiStore();
const fileStore = useFileStore();
const isBalck = ref(false)
const { productName, paymentInfo } = storeToRefs(store);
const { cardImageFront, cardImageBack, fontUrl, backUrl,fileSize2,fileSize1 } =
  storeToRefs(fileStore);
console.log("insuranceinfo-store解构==>", productName, paymentInfo);
console.log(
  "insuranceinfo-store解构==>",
  cardImageFront,
  cardImageBack,
  fontUrl,
  backUrl
);
const fontRef = ref(null);
const backRef = ref(null);
// const fileSize1 = ref(null)
// const fileSize2 = ref(null)
const agreement = ref(false);
const goPlanInsuance = () => {
  console.log("哈哈");

  router.push({
    path: "/insuranceCompany",
  });
};
const handleSubmit = () => {
  if(valid() && agreement.value && isBalck.value == false){
    router.push({
      path: "/shapping",
    });
  }
};
// watch(()=> isBalck.value ,(v)=>{
//   isShowBalck.value = v
// },{deep: true,immediate: true})
onMounted(() => {
  if (fontUrl.value) {
    fontUrl.value += "";
  }
  if (backUrl.value) {
    backUrl.value += "";
  }
  firstValidBaclk()
});
const beforeUpload = (file) => {
  console.log('beforeUpload-file', file);
  
  const isJPGOrPNG = file.type === "image/jpeg" || file.type === "image/png";
  const isLt2M = file.size / 1024 / 1024 < 5; // 判断文件大小是否小于5MB

  // if (!isJPGOrPNG) {
  //   ElMessage.error('上传头像图片只能是 JPG/PNG 格式!');
  // }
  if (!isLt2M) {
    ElMessage.error("Limit 5MB!");
  }
  return isJPGOrPNG && isLt2M; // 返回false可以阻止自动上传，返回true则可以上传。这里我们用它来控制是否显示预览。
};

const handleChange = (file, fileList) => {
  console.log("file", file);
 
  if (file.raw) {
    fileSize1.value = file.size
    if(fileSize2.value && fileSize1.value && fileSize1.value == fileSize2.value) {
      fontUrl.value = "";
      fileSize1.value = null
      cardImageFront.value = null;
      return ElMessage.warning("File is same.");
    }else {
      // 检查是否有原始文件对象（即用户选择了文件）
      fontUrl.value = URL.createObjectURL(file.raw); // 创建图片URL用于预览
      cardImageFront.value = file.raw;
    }


  } else {
    // 如果用户移除了文件，则清除图片URL
    fontUrl.value = "";

    cardImageFront.value = null;
  }
};

const handleRightChange = (file, fileList) => {
  console.log("file-back", file);

  if (file.raw) {
    fileSize2.value = file.size
    if(fileSize2.value && fileSize1.value && fileSize1.value === fileSize2.value) {
      backUrl.value = "";
      cardImageBack.value = null;
      fileSize2.value = null
      return ElMessage.warning("File is same.");
    }else {
      // 检查是否有原始文件对象（即用户选择了文件）
      backUrl.value = URL.createObjectURL(file.raw); // 创建图片URL用于预览
      cardImageBack.value = file.raw;

    }

  } else {
    // 如果用户移除了文件，则清除图片URL
    backUrl.value = "";
    cardImageBack.value = null;
  }
};
const cardFontList: UploadProps["onExceed"] = (files) => {
  fontRef.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  fontRef.value!.handleStart(file);
};
const goBack = () => {

  router.push({
          path: '/patientInfo'
      })
};
const validBaclk = (e) => {
  console.log('e', e.target.value);
  
  const balckList = [
    "Humana",
    "aetna",
    "cigna",
    "United Healthcare",
    "UnitedHealthcare",
    "BlueCrossBlueShield",
    "BlueCross BlueShield"
  ];
  isBalck.value = balckList.some((item) => {
    return item.toLocaleLowerCase() == e.target.value.trim().toLocaleLowerCase()
  })
  console.log('isBalck', isBalck.value);
  
  // 检验黑名单
};
const firstValidBaclk = () => {
  const balckList = [
    "Humana",
    "aetna",
    "cigna",
    "United Healthcare",
    "UnitedHealthcare",
    "BlueCrossBlueShield",
    "BlueCross BlueShield"
  ];
  isBalck.value = balckList.some((item) => {
    return item.toLocaleLowerCase() == paymentInfo.value.insurer.toLocaleLowerCase()
  })
  console.log('isBalck', isBalck.value);
  
  // 检验黑名单
};
// 校验参数
const valid = () => {


  if(!paymentInfo.value.insurer){
    ElMessage.warning("Please input your insurance.");
    return false;
  }
  if(!paymentInfo.value.insuredMemberId){
    ElMessage.warning("Please input your Insurance Member ID.");
    return false;
  }
  if(!fontUrl.value){
    ElMessage.warning("Please upload the file of the front of your insurance card.");
    return false;
  }
  if(!backUrl.value){
    ElMessage.warning("Please upload the file of the back of your insurance card.");
    return false;
  }
  return true
};
</script>
<style scoped lang="less">
@import "@/assets/css/base.css";
.box {
  font-family: Bicyclette;
}
.avatar {
  width: 122px;
  height: 122px;
  display: block;
}
.upload-box1,.upload-box2 {
  width: 122px;
  height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-600 {
  background-color: #4b5563 !important;
}
button:focus {
  outline: none;
}
input[type="radio"] {
  display: none;
}
.text-gray-600 {
  color: #6f6f6f;
}
.insurance,
.selfPay {
  line-height: 1.2;
  font-weight: 700;
  font-size: 16px;
}
.Insurance {
  text-align: center;
  line-height: 1;
  font-weight: 700;
}
:deep(.el-upload--picture-card) {
  width: 122px;
  height: 122px;
  border: none;
}
</style>
        